<template>
  <div id="chart" class="chart" style="width: 4.45rem;height: 2rem"></div>
</template>

<script>
import { debounce } from '@tv/utils/debunce';
import * as echarts from './echarts.min';

export default {
  name: 'fld',
  props: {
    fDatas: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data () {
    return {
      chart: null,
      eOptions: {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          top: '0',
          right: '0', 
          itemGap: 5,
          itemHeight: 5,
          data: ['实时业绩额', '目标达成率'],
          textStyle: {
            color: '#f0f0f0',
            fontSize: 8
          }
        },
        grid: {
          left: '15%',
          right: '15%',
          bottom: '5%',
          top: '28%',
          height: '50%',
          backgroundColor: 'rgba(0,0,0,0)'
        },
        xAxis: {
          show: true,
          data: [],
          axisLabel: {
            color: '#f0f0f0',
            fontSize: 8
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            name: '万元',
            nameGap: 2,
            nameLocation: 'end',
            nameRotate: 0,
            type: 'value',
            axisLabel: {
              show: false,
              color: '#2d343d',
              formatter: '{value}万元'
            },
            axisLine: {
              lineStyle: {
                color: '#2d343d',
                fontSize: 8
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#2d343d',
                fontSize: 8
              }
            },
            splitArea: {
              show: false
            }
          },
          {
            name: '100%',
            nameGap: 2,
            nameLocation: 'end',
            nameRotate: 0,
            type: 'value',
            position: 'right',
            axisLabel: {
              color: '#2d343d',
              fontSize: 8,
              formatter: '{value}'
            },
            axisLine: {
              lineStyle: {
                color: '#2d343d',
                fontSize: 8
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitArea: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '实时业绩额',
            type: 'bar',
            barWidth: '30%',
            label: {
              normal: {
                show: true,
                position: 'insideLeft',
                fontSize: 8,
                color: '#f0f0f0'
              }
            },
            itemStyle: {
              normal: {
                barBorderRadius: [5,5,0,0],
                color: params => {
                  // const colorList = '#6f7dbc';
                  // return colorList;
                  const colorList = '#f8ba4d';
                  return colorList;
                }
              }
            },
            data: ''
          },
          {
            name: '目标达成率',
            type: 'line',
            smooth: false,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#f0f0f0',
                fontSize: 8,
                label: {
                  show: true,
                  position: 'top',
                  fontSize: 8,
                  formatter: function(p) {
                    return p.value > 0 ? (p.value + '%') : '';
                  }
                }
              }
            },
            data: ''
          }
        ]
      }
    };
  },
  mounted () {
    this.initBarChart();
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 10);
    window.addEventListener('resize', this.__resizeHanlder);
  },
  beforeDestroy () {
    if (!this.chart) {
      return;
    }
    window.removeEventListener('resize', this.__resizeHanlder);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initBarChart () {
      this.chart = echarts.echarts.init(document.getElementById('chart'));
      this.chart.setOption(this.eOptions);
      this.chart.resize();
    }
  },
  watch: {
    'fDatas': {
      handler (val,oldval) {
        this.eOptions.xAxis.data = val[0].lg;
        this.eOptions.series[0].data = val[1].fd;
        this.eOptions.series[1].data = val[2].fdr;
        this.chart.setOption(this.eOptions);
        this.chart.resize();
      }
    }
  }
};
</script>
